<template>
  <div>
    <h1>一级商品分类统计</h1>
    {{ dd }}
    {{ dingdan }}
    <el-button type="text" @click="fetchData((val = 0))">今日</el-button>
    <el-button type="text" @click="fetchData((val = 7))">本周</el-button>
    <el-button type="text" @click="fetchData((val = 30))">本月</el-button>
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="fetchData()"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
    <!--显示表格数据-->
    <!--商品类目分析图表-->
    <div id="main" style="width:700px; height:500px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      date: "",
      tableData: [],
      dateRange: [], // 日期选择器绑定的变量
      totalMoney: 0, // 销售总金额
      totalNum: 0, // 销售总数量
      dingdan: "", //本周订单总数
      sevendaysMoney: "",
      dingdandate: [],
      formData: [],
      dd: "",
      bb: 0
    };
  },
  created() {
    // this.asas();
    this.orders();
  },
  mounted() {
    this.aaa();
  },
  methods: {
    //订单总数
    async orders() {
      const time = new Date(Date.now() - 24 * 7 * 60 * 60 * 1000);
      this.dateRange = [];
      this.dateRange.push(time);
      this.dateRange.push(new Date(Date.now()));
      // this.aaa();

      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];

      const categoryReportVo = {
        date1: date1,
        date2: date2
      };
      const { data: res } = await this.$http.post(
        `/order/order/orders`,
        categoryReportVo
      );
      this.dingdan = res.data.maps.orders;
    },
    async fetchData(val) {
      const time = new Date(Date.now() - 24 * val * 60 * 60 * 1000);
      this.dateRange = [];
      this.dateRange.push(time);
      this.dateRange.push(new Date(Date.now()));

      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];
      const categoryReportVo = {
        date1: date1,
        date2: date2
      };
      const { data: res } = await this.$http.post(
        `/order/order/orders`,
        categoryReportVo
      );
      this.dingdandate = res.data.maps.end_time;
      for (let i = 0; i < res.data.maps.length; i++) {
        const val = res.data.maps[i].end_time;
        this.formData.push([val, res.data.maps[i].orders]);
        this.bb = res.data.maps[i].orders + this.bb;
      }
      this.aaa();
      this.dingdan = this.bb;
      this.bb = 0;
    },
    aaa() {
      // 初始化echarts容器
      var myChart = echarts.init(document.getElementById("main"));
      // console.log(this.formData);
      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          splitLine: {
            //去除网格线
            show: false
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"],
          splitLine: {
            //去除网格线
            show: false
          }
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 0,
              lt: 8,
              color: "#8dcce6"
            }
          ]
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "#398dee",
              width: 5
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false }
            },
            areaStyle: {},
            data: this.formData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped></style>
